    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/iview/3.1.5/styles/iview.css">
    <script type="text/javascript" src="//vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/iview/3.1.5/iview.min.js"></script>

    <style scoped>
        .layout{
            border: 1px solid #d7dde4;
            background: #f5f7f9;
            position: relative;
            border-radius: 4px;
            overflow: hidden;
        }
        .layout-logo{
            width: 100px;
            height: 30px;
            background: #5b6270;
            border-radius: 3px;
            float: left;
            position: relative;
            top: 15px;
            left: 20px;
        }
        .layout-nav{
            width: 420px;
            margin: 0 auto;
            margin-right: 20px;
        }
        .layout-footer-center{
            text-align: center;
        }
    </style>
    <div class="layout" id="app">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo"></div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Icon type="ios-navigate"></Icon>
                            Item 1
                        </MenuItem>
                        <MenuItem name="2">
                            <Icon type="ios-keypad"></Icon>
                            Item 2
                        </MenuItem>
                        <MenuItem name="3">
                            <Icon type="ios-analytics"></Icon>
                            Item 3
                        </MenuItem>
                        <MenuItem name="4">
                            <Icon type="ios-paper"></Icon>
                            Item 4
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Content :style="{padding: '0 50px'}">
                <Breadcrumb :style="{margin: '20px 0'}">
                    <BreadcrumbItem>Home</BreadcrumbItem>
                    <BreadcrumbItem>Components</BreadcrumbItem>
                    <BreadcrumbItem>Layout</BreadcrumbItem>
                </Breadcrumb>
                <Card>
                    <div style="min-height: 200px;">
                        Content

                        <i-button type="error" ghost @click="show">Click me!</i-button>
                        <Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
                    </div>
                </Card>
            </Content>
            <Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
        </Layout>
    </div>

<script>
    new Vue({
        el: '#app',
        data: {
            visible: false,
            movieList: [
                {
                    name: 'The Shawshank Redemption',
                    url: 'https://movie.douban.com/subject/1292052/',
                    rate: 9.6
                },
                {
                    name: 'Leon:The Professional',
                    url: 'https://movie.douban.com/subject/1295644/',
                    rate: 9.4
                },
                {
                    name: 'Farewell to My Concubine',
                    url: 'https://movie.douban.com/subject/1291546/',
                    rate: 9.5
                },
                {
                    name: 'Forrest Gump',
                    url: 'https://movie.douban.com/subject/1292720/',
                    rate: 9.4
                },
                {
                    name: 'Life Is Beautiful',
                    url: 'https://movie.douban.com/subject/1292063/',
                    rate: 9.5
                },
                {
                    name: 'Spirited Away',
                    url: 'https://movie.douban.com/subject/1291561/',
                    rate: 9.2
                },
                {
                    name: 'Schindlers List',
                    url: 'https://movie.douban.com/subject/1295124/',
                    rate: 9.4
                },
                {
                    name: 'The Legend of 1900',
                        url: 'https://movie.douban.com/subject/1292001/',
                    rate: 9.2
                },
                {
                    name: 'WALL·E',
                        url: 'https://movie.douban.com/subject/2131459/',
                    rate: 9.3
                },
                {
                    name: 'Inception',
                        url: 'https://movie.douban.com/subject/3541415/',
                    rate: 9.2
                }
                ],
                randomMovieList: []
        },
        methods: {
            show: function () {
                this.visible = true;
            },
            changeLimit () {
                function getArrayItems(arr, num) {
                    const temp_array = [];
                    for (let index in arr) {
                        temp_array.push(arr[index]);
                    }
                    const return_array = [];
                    for (let i = 0; i<num; i++) {
                        if (temp_array.length>0) {
                            const arrIndex = Math.floor(Math.random()*temp_array.length);
                            return_array[i] = temp_array[arrIndex];
                            temp_array.splice(arrIndex, 1);
                        } else {
                            break;
                        }
                    }
                    return return_array;
                }
                this.randomMovieList = getArrayItems(this.movieList, 5);
            }
        },
        mounted () {
            this.changeLimit();
        }
    })
</script>
